<template>
  <view class="rescue-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="nav-bar">
        <view class="nav-left" @click="goBack">
        </view>
        <!-- <text class="nav-title">拖车救援</text> -->
        <view class="nav-right"></view>
      </view>
    </view>
    
		<!-- 顶部地图 -->
    <view class="map-card">
      <map 
		id="myMap"
        class="map"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :show-location="true"
        :enable-3D="true"
        :enable-satellite="false"
        :enable-traffic="false"
        :scale="16"
				@tap="onMapTap"
				@regionchange="onRegionChange"
				@updated="onMapUpdated"
      ></map>
			<!-- 地图加载状态 -->
			<view v-if="mapLoading" class="map-loading">
				<text>正在加载地图...</text>
			</view>
    </view>

    <!-- 选项卡：搭电/换胎/拖车 -->
    <view class="tabs">
			<view :class="['tab', activeTab === 0 ? 'active' : '']" @click="switchTab(0)">搭电</view>
			<view :class="['tab', activeTab === 1 ? 'active' : '']" @click="switchTab(1)">换胎</view>
			<view :class="['tab', activeTab === 2 ? 'active' : '']" @click="switchTab(2)">拖车</view>
    </view>

    <!-- 表单区域 -->
    <view class="form">
      <view class="form-item">
        <text class="label">起点</text>
				<input 
					class="input" 
					placeholder="河南省焦作市山阳区32号" 
					v-model="form.start" 
					@blur="resolveAddress('start', $event)" 
				/>
      </view>

      <view class="form-item">
        <text class="label">终点</text>
				<input 
					class="input" 
					placeholder="山阳区解放路66号" 
					v-model="form.end" 
					@blur="resolveAddress('end', $event)" 
				/>
      </view>
      <view class="form-item">
        <text class="label">求助人</text>
        <input class="input" placeholder="张先生" v-model="form.name" />
      </view>
      <view class="form-item">
        <text class="label">联系方式</text>
        <input class="input" placeholder="15523632541" v-model="form.phone" />
      </view>
      <view class="form-item">
        <text class="label">车牌</text>
        <input class="input" placeholder="豫CJ4321" v-model="form.plate" />
      </view>
      <view class="form-item textarea-item">
        <text class="label">描述</text>
        <textarea class="textarea" :maxlength="200" placeholder="请准确描述当前的状况及所需的帮助" v-model="form.desc" />
      </view>
    </view>

    <!-- 呼叫救援按钮 -->
    <view class="call-wrap">
      <button class="call-btn" @click="callHelp">呼叫救援</button>
      <view class="record-link" @click="goRecords">救援记录 ></view>
    </view>

    <!-- 警务救助 -->
    <view class="police-card">
			<view class="police-title">
				警务救助
			</view>
      <view class="police-grid">
				<view class="police-item" v-for="item in policeList" :key="item.name">
          <image :src="item.icon" class="police-icon" mode="aspectFit" />
          <text class="police-name">{{ item.name }}</text>
          <text class="police-tel">{{ item.tel }}</text>
        </view>
      </view>
    </view>

		<!-- 紧急恢复按钮（当所有Key都不可用时显示） -->
		<view v-if="keyStatus.failedKeys.length > 0" class="emergency-recovery">
			<button class="recovery-btn" @click="addNewKey">添加新Key恢复服务</button>
		</view>
		

		<!-- 底部占位 -->
    <view class="bottom-tab-placeholder"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
				activeTab: 2, // 默认选中拖车页面
      form: {
        start: '',
        end: '',
        name: '',
        phone: '',
        plate: '',
					desc: '',
					startLocation: null, // 起点经纬度
					endLocation: null    // 终点经纬度
				},
				policeList: [{
						name: '交通事故',
						tel: '122',
						icon: '/static/static-lj/交通事故 拷贝.png'
					},
					{
						name: '火警',
						tel: '119',
						icon: '/static/static-lj/火警.png'
					},
					{
						name: '急救中心',
						tel: '120',
						icon: '/static/static-lj/急救包.png'
					},
					{
						name: '公安报警',
						tel: '110',
						icon: '/static/static-lj/警察,公安.png'
					}

				],
				latitude: 34.775, // 默认纬度（焦作示例）
      longitude: 113.665, // 默认经度
				markers: [],
				mapLoading: true, // 地图加载状态
				locationPermission: false, // 定位权限状态
				keyStatus: {
					currentKeyIndex: 0, // 当前使用的Key索引
					failedKeys: [], // 已失败的Key索引列表
					lastSuccessTime: 0 // 最后一次成功的时间戳
				},
				currentResolvingAddress: null // 当前正在解析的地址信息

    }
  },
  onLoad() {
			this.initMap();
		},
		onShow() {
			// 页面显示时重新获取位置
			this.getCurrentLocation();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 初始化地图
			initMap() {
				this.mapLoading = true;
				this.getCurrentLocation();
			},
			
    // 获取当前位置
			getCurrentLocation() {
				// 检查定位权限
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === false) {
							// 用户拒绝了定位权限，显示默认位置
							this.showDefaultLocation();
							return;
						}
						
						// 尝试获取位置
    uni.getLocation({
      type: 'gcj02',
							altitude: true,
      success: (res) => {
								console.log('定位成功:', res);
								this.latitude = res.latitude;
								this.longitude = res.longitude;
								this.locationPermission = true;
								this.updateMarkers();
								this.mapLoading = false;
							},
							fail: (err) => {
								console.log('定位失败:', err);
								this.showDefaultLocation();
							}
						});
      },
      fail: () => {
						this.showDefaultLocation();
					}
				});
			},
			
			// 显示默认位置
			showDefaultLocation() {
				this.locationPermission = false;
				this.mapLoading = false;
				this.updateMarkers();
				
				// 提示用户
				uni.showToast({
					title: '定位失败，显示默认位置',
					icon: 'none',
					duration: 2000
				});
			},
			
			// 更新地图标记
			updateMarkers() {
				this.markers = []; // 清空原有标记
				console.log('更新地图标记 - 起点:', this.form.startLocation, '终点:', this.form.endLocation);

				// 显示「起点」标记
				if (this.form.startLocation) {
					this.markers.push({
            id: 1,
						latitude: this.form.startLocation.lat,
						longitude: this.form.startLocation.lng,
						iconPath: '/static/static-lj/椭圆 3 拷贝 2.png', // 使用指定的定位图标
						width: 35,
						height: 35,
						anchor: { x: 0.5, y: 1 }, // 设置锚点，让图标底部对准位置
						callout: {
							content: '起点',
							color: '#fff',
							fontSize: 14,
							fontWeight: 'bold',
							bgColor: '#0a78ff',
							padding: 8,
							borderRadius: 15,
							display: 'ALWAYS',
							borderWidth: 2,
							borderColor: '#fff',
							boxShadow: '0 2px 6px rgba(10, 120, 255, 0.3)'
						}
					});
					console.log('添加起点标记:', this.form.startLocation);
				}

				// 显示「终点」标记
				if (this.form.endLocation) {
					this.markers.push({
						id: 2,
						latitude: this.form.endLocation.lat,
						longitude: this.form.endLocation.lng,
						iconPath: '/static/static-lj/椭圆 3 拷贝 2.png', // 使用指定的定位图标
						width: 35,
						height: 35,
						anchor: { x: 0.5, y: 1 }, // 设置锚点，让图标底部对准位置
						callout: {
							content: '终点',
							color: '#fff',
							fontSize: 14,
							fontWeight: 'bold',
							bgColor: '#ff6a2f',
							padding: 8,
							borderRadius: 15,
							display: 'ALWAYS',
							borderWidth: 2,
							borderColor: '#fff',
							boxShadow: '0 2px 6px rgba(255, 106, 47, 0.3)'
						}
					});
					console.log('添加终点标记:', this.form.endLocation);
				}

				// 若没有起点/终点，显示「默认位置」
				if (this.markers.length === 0) {
					this.markers.push({
						id: 3,
            latitude: this.latitude,
            longitude: this.longitude,
						iconPath: '/static/static-lj/椭圆 3 拷贝 2.png', // 使用指定的定位图标
						width: 32,
						height: 32,
						anchor: { x: 0.5, y: 1 }, // 设置锚点，让图标底部对准位置
						callout: {
							content: this.locationPermission ? '当前位置' : '默认位置（焦作市）',
							color: '#fff',
							fontSize: 13,
							fontWeight: 'bold',
							bgColor: '#666',
							padding: 8,
							borderRadius: 12,
							display: 'ALWAYS',
							borderWidth: 2,
							borderColor: '#fff',
							boxShadow: '0 2px 4px rgba(102, 102, 102, 0.3)'
						}
					});
				}
			},
			
			// 解析地址为经纬度（type: 'start' 或 'end'）
			resolveAddress(type, e) {
				let address = e.target.value.trim();
				console.log(`开始解析${type === 'start' ? '起点' : '终点'}地址:`, address);
				
				if (!address) {
					// 清空地址时也清除对应的经纬度
					this.form[type + 'Location'] = null;
					this.updateMarkers();
					return;
				}

				// 如果是终点且地址不包含省/市信息，尝试沿用起点的省/市
				if (type === 'end' && this.form.start) {
					const originalAddress = address;
					address = this.buildFullAddress(address, this.form.start);
					console.log(`终点地址拼接: ${originalAddress} -> ${address}`);
				}
				
				// 记录当前正在解析的地址
				this.currentResolvingAddress = { type, address };

				// 检查本地缓存
				const cacheKey = `address_${address}`;
				const cachedLocation = uni.getStorageSync(cacheKey);
				if (cachedLocation) {
					console.log('使用缓存地址:', cachedLocation);
					if (type === 'start') {
						this.form.startLocation = cachedLocation;
						this.latitude = cachedLocation.lat;
						this.longitude = cachedLocation.lng;
						console.log('使用起点缓存地址:', cachedLocation);
						
						// 强制更新地图中心位置
						this.$nextTick(() => {
							const mapCtx = uni.createMapContext('myMap');
							mapCtx.moveToLocation({
								latitude: cachedLocation.lat,
								longitude: cachedLocation.lng
							});
							console.log('地图中心已更新到起点缓存位置:', cachedLocation.lat, cachedLocation.lng);
						});
					} else if (type === 'end') {
						this.form.endLocation = cachedLocation;
						
						// 如果只有终点没有起点，将地图中心设为终点
						if (!this.form.startLocation) {
							this.latitude = cachedLocation.lat;
							this.longitude = cachedLocation.lng;
							
							// 强制更新地图中心位置
							this.$nextTick(() => {
								const mapCtx = uni.createMapContext('myMap');
								mapCtx.moveToLocation({
									latitude: cachedLocation.lat,
									longitude: cachedLocation.lng
								});
							});
						}
					}
					this.updateMarkers();
					if (this.form.startLocation && this.form.endLocation) {
						this.adjustMapView();
					}
					return;
				}

				// 使用多Key轮换机制解析地址
				this.resolveAddressWithFallback(type, address, 0);
			},
			
			// 构建完整地址：为终点地址补充起点的省/市信息
			buildFullAddress(endAddress, startAddress) {
				// 如果终点地址已经包含完整的省/市信息，直接返回
				if (endAddress.includes('省') && endAddress.includes('市')) {
					return endAddress;
				}
				
				// 从起点地址中提取省和市信息
				const provinceMatch = startAddress.match(/(.*?省)/);
				const cityMatch = startAddress.match(/(.*?市)/);
				
				if (provinceMatch && cityMatch) {
					const province = provinceMatch[1];
					const city = cityMatch[1];
					
					// 清理终点地址，移除可能存在的省/市信息
					let cleanEndAddress = endAddress;
					
					// 移除终点地址中可能存在的省信息
					cleanEndAddress = cleanEndAddress.replace(/.*?省/, '');
					// 移除终点地址中可能存在的市信息
					cleanEndAddress = cleanEndAddress.replace(/.*?市/, '');
					
					// 构建完整地址：省 + 市 + 清理后的终点地址
					const fullAddress = province + city + cleanEndAddress;
					
					console.log(`终点地址自动补充：${endAddress} -> ${fullAddress}`);
					
					// 更新输入框显示完整地址
					this.$nextTick(() => {
						this.form.end = fullAddress;
					});
					
					return fullAddress;
				}
				
				// 如果无法提取省/市信息，返回原地址
				return endAddress;
			},
			
			// 使用备用Key策略解析地址
			resolveAddressWithFallback(type, address, keyIndex) {
				// 显示加载提示
				uni.showLoading({
					title: `解析地址中...${keyIndex > 0 ? `(使用备用Key${keyIndex + 1})` : ''}`
				});

				// 获取用户自定义的Key
				const customKeys = uni.getStorageSync('custom_map_keys') || [];
				
				// 腾讯地图 Key 列表（按优先级排序）
				const mapKeys = [
					// 用户自定义Key优先使用
					...customKeys,
					// 默认Key
					'KZCBZ-AYZK7-CKLXX-P67B4-66FHZ-3ZB52', // 主要Key
					'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 备用Key1
					'5BJBZ-QYECX-7J54Z-2N2Q6-5S5U6-J2F3D',  // 备用Key2
					'KZCBZ-AYZK7-CKLXX-P67B4-66FHZ-3ZB52', // 重复使用主要Key
					'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 重复使用备用Key1
					'5BJBZ-QYECX-7J54Z-2N2Q6-5S5U6-J2F3D',  // 重复使用备用Key2
				];

				// 过滤掉无效的Key（包含占位符的Key）
				const validKeys = mapKeys.filter(key => 
					!key.includes('YOUR_KEY') && 
					key.length > 10 // 确保Key长度合理
				);

				// 如果所有有效Key都用完了，显示错误并提供解决方案
				if (keyIndex >= validKeys.length) {
					uni.hideLoading();
					console.log('所有有效Key都已用完，地址解析失败:', address);
					uni.showModal({
						title: '地图服务暂时不可用',
						content: `所有地图服务Key都已达到调用限制。\n\n解决方案：\n1. 点击"添加新Key"输入有效Key\n2. 使用默认位置继续\n3. 稍后再试`,
						showCancel: true,
						cancelText: '稍后再试',
						confirmText: '添加新Key',
						success: (res) => {
							if (res.confirm) {
								this.addNewKey();
							} else {
								// 使用默认位置
								this.useDefaultLocationForAddress(type, address);
							}
						}
					});
					return;
				}

				const mapKey = validKeys[keyIndex];
				const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${mapKey}`;
				
				console.log(`尝试使用Key ${keyIndex + 1} 解析地址:`, address);
				console.log('API URL:', apiUrl);

				uni.request({
					url: apiUrl,
					success: (res) => {
						uni.hideLoading();
						console.log(`Key ${keyIndex + 1} API响应:`, res.data);
						
						if (res.data.status === 0) { // API返回成功
							const location = res.data.result.location; // 经纬度信息
							const locationData = { lat: location.lat, lng: location.lng };
							 
							// 缓存地址解析结果，避免重复调用API
							uni.setStorageSync(`address_${address}`, locationData);
							 
							if (type === 'start') {
								this.form.startLocation = locationData;
								this.latitude = location.lat; // 地图中心设为起点纬度
								this.longitude = location.lng; // 地图中心设为起点经度
								console.log('起点地址解析成功:', locationData);
								
								// 强制更新地图中心位置
								this.$nextTick(() => {
									const mapCtx = uni.createMapContext('myMap');
									mapCtx.moveToLocation({
										latitude: location.lat,
										longitude: location.lng
									});
									console.log('地图中心已更新到起点位置:', location.lat, location.lng);
									
									// 延迟更新标记，确保地图位置先更新
									setTimeout(() => {
										this.updateMarkers();
										console.log('起点标记已更新');
									}, 500);
								});
							} else if (type === 'end') {
								this.form.endLocation = locationData;
								console.log('终点地址解析成功:', locationData);
								
								// 如果只有终点没有起点，将地图中心设为终点
								if (!this.form.startLocation) {
									this.latitude = location.lat;
									this.longitude = location.lng;
									
									// 强制更新地图中心位置
									this.$nextTick(() => {
										const mapCtx = uni.createMapContext('myMap');
										mapCtx.moveToLocation({
											latitude: location.lat,
											longitude: location.lng
										});
										console.log('地图中心已更新到终点位置:', location.lat, location.lng);
										
										// 延迟更新标记，确保地图位置先更新
										setTimeout(() => {
											this.updateMarkers();
											console.log('终点标记已更新');
										}, 500);
									});
								}
							}
							this.updateMarkers(); // 更新地图标记
							
							// 若同时存在起点和终点，调整地图视野容纳两者
							if (this.form.startLocation && this.form.endLocation) {
								this.adjustMapView();
							}
						} else {
							// 处理API错误
							console.log(`Key ${keyIndex + 1} 解析失败:`, res.data);
							const errorMsg = res.data.message || '未知错误';
							 
							// 如果是调用量上限错误，尝试下一个备用Key
							if (errorMsg.includes('调用量已达到上限') || errorMsg.includes('配额不足')) {
								console.log(`Key ${keyIndex + 1} 调用量已达上限，尝试下一个Key`);
								this.resolveAddressWithFallback(type, address, keyIndex + 1);
							} else {
								console.log(`Key ${keyIndex + 1} 出现其他错误: ${errorMsg}，尝试下一个Key`);
								this.resolveAddressWithFallback(type, address, keyIndex + 1);
							}
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.log(`Key ${keyIndex + 1} 网络请求失败:`, err);
						// 网络错误也尝试下一个Key
						this.resolveAddressWithFallback(type, address, keyIndex + 1);
					}
				});
			},
			
			// 调整地图视野以同时显示起点和终点
			adjustMapView() {
				console.log('调整地图视野以显示起点和终点');
				console.log('起点位置:', this.form.startLocation);
				console.log('终点位置:', this.form.endLocation);
				
				this.$nextTick(() => {
					const mapCtx = uni.createMapContext('myMap');
					const points = [
						{ 
							latitude: this.form.startLocation.lat, 
							longitude: this.form.startLocation.lng 
						},
						{ 
							latitude: this.form.endLocation.lat, 
							longitude: this.form.endLocation.lng 
						}
					];
					
					console.log('地图视野调整点:', points);
					
					mapCtx.includePoints({
						padding: [80, 80, 80, 80], // 四周留白
						points: points
					});
					
					console.log('地图视野已调整');
					
					// 延迟更新标记，确保地图视野调整完成
					setTimeout(() => {
						this.updateMarkers();
						console.log('地图标记已更新（调整视野后）');
					}, 1000);
				});
			},
			
			// 地图点击事件
			onMapTap(e) {
				console.log('地图点击:', e);
			},
			
			// 地图区域变化事件
			onRegionChange(e) {
				console.log('地图区域变化:', e);
			},
			
			// 地图更新完成事件
			onMapUpdated(e) {
				console.log('地图更新完成:', e);
				this.mapLoading = false;
			},
			
			// 重新定位
			relocate() {
				this.mapLoading = true;
				this.getCurrentLocation();
			},
			
			switchTab(index) {
				// 如果点击的是当前已激活的标签，不执行任何操作
				if (this.activeTab === index) {
					return;
				}
				
				// 只有拖车页面(index=2)才在当前页面处理
				if (index === 2) {
					this.activeTab = index;
					uni.showToast({
						title: '已切换到拖车服务',
						icon: 'none',
						duration: 1500
					});
					
					// 确保地图正确显示
					if (this.form.startLocation) {
						this.$nextTick(() => {
							const mapCtx = uni.createMapContext('myMap');
							mapCtx.moveToLocation({
								latitude: this.form.startLocation.lat,
								longitude: this.form.startLocation.lng
							});
						});
					}
				} else {
					// 搭电和换胎页面跳转到其他页面
					const tabNames = ['搭电', '换胎', '拖车'];
					uni.showToast({
						title: `正在跳转到${tabNames[index]}页面`,
						icon: 'loading',
						duration: 1000
					});
					
					// 跳转到对应的页面
					if (index === 0) {
						// 跳转到搭电页面
						uni.reLaunch({
							url: '/pages/help/jump-start'
						});
					} else if (index === 1) {
						// 跳转到换胎页面
						uni.navigateTo({
							url: '/pages/help/chang-tire'
						});
					}
				}
			},
			
			callHelp() {
				// 验证表单
				if (!this.form.start || !this.form.startLocation) {
					return uni.showToast({ title: '请输入有效的起点地址', icon: 'none' });
				}
				
				if (!this.form.name || !this.form.phone) {
					return uni.showToast({ title: '请完善联系人信息', icon: 'none' });
				}
				
				uni.showToast({
					title: '已发起救援',
					icon: 'success'
				})
			},
			
    goRecords() {
				console.log('跳转到救援记录页面');
				uni.navigateTo({
					url: '/help-item/emergency/record',
					success: () => {
						console.log('跳转成功');
					},
					fail: (err) => {
						console.log('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 添加新Key
			addNewKey() {
				uni.showModal({
					title: '添加新的地图Key',
					content: '请输入新的腾讯地图Key以恢复服务\n\n获取Key步骤：\n1. 访问 https://lbs.qq.com/\n2. 注册/登录账号\n3. 创建应用获取Key',
					editable: true,
					placeholderText: '请输入新的Key（格式：KZCBZ-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX）',
					success: (res) => {
						if (res.confirm && res.content) {
							const key = res.content.trim();
							if (key.length > 20 && key.includes('-')) {
								// 测试新Key
								this.testAndAddNewKey(key);
      } else {
								uni.showToast({
									title: 'Key格式不正确，请检查',
									icon: 'none',
									duration: 3000
								});
							}
						}
					}
				});
			},
			
			// 测试并添加新Key
			testAndAddNewKey(newKey) {
				uni.showLoading({
					title: '测试新Key中...'
				});
				
				const testAddress = '北京市天安门';
				const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(testAddress)}&key=${newKey}`;
				
				uni.request({
					url: apiUrl,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 0) {
							// Key有效，保存到本地存储
							const savedKeys = uni.getStorageSync('custom_map_keys') || [];
							if (!savedKeys.includes(newKey)) {
								savedKeys.push(newKey);
								uni.setStorageSync('custom_map_keys', savedKeys);
							}
							
							// 重置Key状态
							this.keyStatus = {
								currentKeyIndex: 0,
								failedKeys: [],
								lastSuccessTime: 0
							};
							
							uni.showToast({
								title: '新Key添加成功！',
								icon: 'success'
							});
							
							// 重新尝试解析当前地址
							this.retryCurrentAddress();
						} else {
							uni.showToast({
								title: '新Key测试失败，请检查Key是否正确',
								icon: 'none',
								duration: 3000
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，无法测试Key',
							icon: 'none'
						});
					}
				});
			},
			
			// 使用默认位置处理地址
			useDefaultLocationForAddress(type, address) {
				// 使用当前地图中心作为默认位置
				const defaultLocation = {
					lat: this.latitude,
					lng: this.longitude
				};
				
				// 缓存地址（即使没有精确坐标）
				uni.setStorageSync(`address_${address}`, defaultLocation);
				
				if (type === 'start') {
					this.form.startLocation = defaultLocation;
				} else if (type === 'end') {
					this.form.endLocation = defaultLocation;
				}
				
				this.updateMarkers();
				
				uni.showToast({
					title: '已使用默认位置',
					icon: 'none',
					duration: 2000
				});
			},
			
			// 重试当前地址解析
			retryCurrentAddress() {
				// 重新解析当前正在处理的地址
				const currentAddress = this.currentResolvingAddress;
				if (currentAddress) {
					this.resolveAddressWithFallback(currentAddress.type, currentAddress.address, 0);
				}
			},
			
  }
}
</script>


<style scoped>
.rescue-page {
  background: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.rescue-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250rpx; /* 蓝色区域高度 - 缩小 */
  background-color: #3184FD;
  z-index: 0; /* 在页面内容下方 */
}

/* 顶部导航栏 */
.header {
  background: #fff;
  padding-top: var(--status-bar-height, 0);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70rpx; /* 缩小导航栏高度 */
  padding: 0 32rpx;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  width: 80rpx;
}

.back-icon {
  font-size: 36rpx; /* 缩小返回图标 */
  color: #333;
  font-weight: bold;
  line-height: 1;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx; /* 缩小标题字体 */
  font-weight: 600;
  color: #333;
}

.nav-right {
  width: 80rpx;
}

.rescue-page {
  padding: 20rpx;
}

.map-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 12rpx;
  margin-bottom: 20rpx;
}

.map {
  width: 100%;
  height: 520rpx; /* 增加地图高度 */
  border-radius: 12rpx;
  overflow: hidden;
		position: relative;
	}

	.map-loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		z-index: 10;
	}

	.map-loading text {
		color: #666;
		font-size: 28rpx;
}

.map-placeholder {
  height: 420rpx;
  background: #e9f2ff;
  border-radius: 12rpx;
  color: #2a78ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 32rpx;
  color: #333;
		transition: all 0.3s ease;
		position: relative;
		cursor: pointer;
	}

	.tab:hover {
		background: #f5f5f5;
		border-radius: 12rpx;
	}

.tab.active {
  color: #0a78ff;
  font-weight: 600;
		background: #e6f3ff;
		border-radius: 12rpx;
		transform: scale(1.02);
}

.tab.active::after {
  content: '';
  position: absolute;
  right: 40rpx;
  left: 40rpx;
  bottom: -10rpx;
  height: 8rpx;
  background: #0a78ff;
  border-radius: 8rpx;
		animation: slideIn 0.3s ease;
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: scaleX(0);
		}
		to {
			opacity: 1;
			transform: scaleX(1);
		}
}

.form {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 0;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
		position: relative;
}

.label {
  width: 140rpx;
  height: 64rpx;
  background: #5aaeff;
  color: #fff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 64rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  height: 64rpx;
  background: #f7f7f7;
  border-radius: 40rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
}

	.textarea-item {
		align-items: flex-start;
	}

.textarea {
  flex: 1;
  min-height: 180rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
}

	.call-wrap {
		padding: 30rpx 0 10rpx;
	}

.call-btn {
  height: 92rpx;
  background: linear-gradient(90deg, #ff6a2f, #ff3b00);
  color: #fff;
  border-radius: 60rpx;
  font-size: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.record-link {
  text-align: center;
  color: #999;
  margin-top: 16rpx;
}

.police-card {
  background: #fff;
  border-radius: 16rpx;
		padding: 24rpx;
  margin-top: 12rpx;
}

	.police-title {
		font-size: 36rpx;
		margin-bottom: 24rpx;
		color: #333;
		font-weight: 600;
	}

.police-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.police-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 12rpx;
	}

	.police-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 12rpx;
		display: block;
		object-fit: contain;
	}

	.police-name {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
		text-align: center;
	}

	.police-tel {
		color: #666;
		font-size: 24rpx;
		text-align: center;
	}

	.emergency-recovery {
		position: fixed;
		bottom: 160rpx;
		left: 20rpx;
		right: 20rpx;
		z-index: 1000;
	}

	.recovery-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #ff4757, #ff3742);
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
		animation: pulse 2s infinite;
	}
	

	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}

	.bottom-tab-placeholder {
		height: 140rpx;
	}
</style>
